<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <!--关键数据-->
  <el-card shadow="never" body-style="padding: 0px 12px">
    <el-backtop :bottom="100" :visibility-height="100"></el-backtop>
    <div>
      <el-row style="padding: 16px 0px;margin-left: 12px;">
        <el-col :span="20">
          <ft-return-btn text="返回客户列表" @click="goBackList()"></ft-return-btn>
        </el-col>
        <el-col :span="4">
          <div style='float:right'>
            <ft-operation-log :source-id="customerId"></ft-operation-log>
          </div>
        </el-col>
      </el-row>

      <el-row v-show="!editMain" style="padding: 0px 12px">
        <el-col :span="4" align="left" style="line-height: 36px">
          <span style="font-size: 14px;color: #747778">基础关键资料</span>
        </el-col>
      </el-row>
      <div :class="{cardBackColor:!editMain}" style="margin: 0px 12px">
        <el-row v-if="editMain">
          <el-col align="left" style="white-space: nowrap;" :span="23">
            <span
              style="font-size: 28px;color: #2A2D2E;line-height: 36px;text-align: left"><b>{{person.customerName}}</b></span>
          </el-col>
          <el-col align="right" :span="1">
            <el-button v-show="editMain && editable" size="small" @click="edit()" plain>编辑</el-button>
          </el-col>
        </el-row>
        <el-form ref="person"
                 :model="person"
                 :rules="rules"
                 v-loading="loading"
                 style="text-align: left" inline>
          <el-row style="padding-left: 12px;padding-right: 12px;padding-bottom: 24px">

            <el-col v-if="!editMain" :md="8" :lg="6">
              <el-form-item label="客户名称" prop="customerName">
                <el-input v-model="person.customerName" v-if="!editMain"></el-input>
                <span v-else>{{person.customerName}}</span>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="证件类型" prop="identityType">
                <ft-enum-select type="data"
                                v-model="person.identityType"
                                service-name="lss-customer"
                                type-name="personalType"
                                placeholder="请选择证件类型"
                                :editing="!editMain"
                                @change="clearIdentityNo">
                </ft-enum-select>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="证件号码" prop="identityNo">
                <el-input v-model="person.identityNo" v-if="!editMain"></el-input>
                <span v-else>{{person.identityNo}}</span>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="主办客户经理" prop="mainManagerId">
                <ft-user v-model="person.mainManagerId"
                         :editable="!editMain"
                         :customerManagerId="person.mainManagerId"
                         @matchedOption="mainManagerChangeMatched"
                         @unmatchedOption="mainManagerChangeMatched"/>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="协办客户经理" prop="viceManagerId">
                <ft-user-with-filter v-model="person.viceManagerId"
                                     ref="viceManagerRef"
                                     :editable="!editMain"
                                     :customerManagerId="person.viceManagerId"
                                     @matchedOption="viceManagerChangeMatched"
                                     @unmatchedOption="viceManagerChangeMatched">

                </ft-user-with-filter>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="所属部门" prop="deptName">
                <ft-input :editing="false" v-model="person.deptName"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="客户评级等级" prop="deptName">
                <ft-enum-select v-model="person.ratingGrade"
                                service-name="lss-customer"
                                type-name="ratingGrade"
                                :editing="false">
                </ft-enum-select>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="风险预警等级" prop="deptName">
                <ft-enum-select v-model="person.riskWarningGrade"
                                service-name="lss-customer"
                                type-name="riskWarningGrade"
                                :editing="false">
                </ft-enum-select>
              </el-form-item>
            </el-col>


            <el-col :md="8" :lg="6">
              <el-form-item label="资产五级分类" prop="deptName">
                <ft-enum-select v-model="person.assetRiskGrade"
                                service-name="lss-customer"
                                type-name="assetRiskGrade"
                                :editing="false">
                </ft-enum-select>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="反洗钱等级" prop="deptName">
                <ft-enum-select v-model="person.amlGrade"
                                service-name="lss-customer"
                                type-name="amlGrade"
                                :editing="false">
                </ft-enum-select>
              </el-form-item>
            </el-col>

          </el-row>

          <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>

          <el-row>
            <el-col align="right">
              <el-button size="mini"
                         @click="cancel()"
                         :disabled="editMain"
                         v-if="!editMain">取消
              </el-button>
              <el-button type="primary"
                         size="mini"
                         @click="onSave()"
                         v-if="!editMain"
                         style="margin-left: 24px"
                         :disabled="editMain || saveStatus">保存
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!--详细信息-->
    <div>
      <el-dropdown v-if="(!showTabInfo || !showTabAtt || !showTabGua || !showTabZc) && editMain"
                   @command="addTab"
                   trigger="click"
                   :show-timeout="outTime" :hide-timeout="outTime"
                   style="z-index:999;right: 12px;top: 9px;float: right;position:relative">
        <el-button type="primary"
                   style="padding: 7px 18px 7px 8px;font-size: 14px;line-height: 20px;"
                   @click="" round>
          <span style="padding: 2px 0px;"><i class="joys-icon-addagain" style="margin-right: 18px;"/>继续添加</span>
        </el-button>
        <el-dropdown-menu slot="dropdown" style="background-color: #353737" class="add-tabs-menu">
          <el-dropdown-item :disabled="showTabInfo" command="tabInfo" class="add-tabs-item">
            <div style="font-size: 12px;line-height: 28px;margin: 7px 7px 2px">
              <i class="joys-icon-checkreport" style="margin-left: 6px"/>
              <span style="margin-left: 11px;margin-right: 27px">基本信息</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item :disabled="showTabZc" command="tabZc" class="add-tabs-item">
            <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
              <i class="joys-icon-attachment" style="margin-left: 6px"/>
              <span style="margin-left: 11px;margin-right: 27px">资产信息</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item :disabled="showTabGua" command="tabGua" class="add-tabs-item">
            <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
              <i class="joys-icon-attachment" style="margin-left: 6px"/>
              <span style="margin-left: 11px;margin-right: 27px">融资及担保</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item :disabled="showTabAtt" command="tabAtt" class="add-tabs-item">
            <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
              <i class="joys-icon-attachment" style="margin-left: 6px"/>
              <span style="margin-left: 11px;margin-right: 27px">附件信息</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <div style="height: 54px;margin: 0px;display: flex;justify-content: space-around"
           v-show="(!showTabInfo && !showTabAtt) && editMain"></div>

      <el-tabs v-model="tabsIndex" @tab-click="tab" stretch>
        <el-tab-pane v-if="showTabInfo" name="0" label="基本信息">
          <div>
            <!--基本信息-->
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
              <person-info :customerId="customerId"
                           @changeMarriage="changeMarriage"
                           @changeCompany="changeCompany"
                           @changeDataVersion="changeDataVersion"
                           :dataVersion="dataVersion"
                           :editable="editable"/>
            </el-card>
            <!--单位信息-->
            <el-card v-show="showCompanyInfo" body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
              <company-info :customerId="customerId"
                            @changeCompany="changeCompany"
                            :showCompanyInfo="showCompanyInfo"
                            @changeDataVersion="changeDataVersion"
                            :dataVersion="dataVersion"
                            :editable="editable"/>
            </el-card>
            <!--居住信息-->
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
              <residential-info :customerId="customerId"
                                @changeDataVersion="changeDataVersion"
                                :dataVersion="dataVersion"
                                :editable="editable"></residential-info>
            </el-card>
            <!--婚姻信息-->
            <el-card v-show="showMarriage" body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
              <marriage-info :customerId="customerId" @changeMarriage="changeMarriage" :editable="editable"></marriage-info>
            </el-card>
            <!--家庭信息-->
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
              <cust-member :customerId="customerId" :editable="editable"></cust-member>
            </el-card>
            <!--资产信息-->
            <!--<el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">-->
            <!--<investment :customerId="customerId"></investment>-->
            <!--</el-card>-->
            <!--银行账户-->
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
              <bank-account :sourceBillId="customerId" :customerName="person.customerName"/>
            </el-card>
          </div>
        </el-tab-pane>

        <el-tab-pane v-if="showTabZc" name="1" label="资产信息">
          <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
            <investment :customerId="customerId" :editable="editable"/>
          </el-card>
        </el-tab-pane>

        <el-tab-pane v-if="showTabGua" name="2" label="融资及担保">
          <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
            <financing-info :customerId="customerId" :editable="editable"></financing-info>
          </el-card>
          <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
            <guarantee-info :customerId="customerId" :editable="editable"></guarantee-info>
          </el-card>
        </el-tab-pane>

        <el-tab-pane v-if="showTabAtt" name="3" label="附件信息">
          <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
            <ft-attach v-if="person&&person.customerId" title="附件信息" sourceType="CUSTOMER"
                       :sourceId="person.customerId"
                       :categories="attachClass"
                       :categories-disabled="categoriesDisabled"
                       :basePath="'/doc/generate/客户维护/'+person.customerId"></ft-attach>
          </el-card>
        </el-tab-pane>
      </el-tabs>

    </div>
  </el-card>

</template>

<script>
  import PersonInfo from "../tabs/PersonInfo"
  import BankAccount from "../tabs/BankAccount"
  import CustMember from "../tabs/CustMember";
  import FtInput from "../ft/FtInput"
  import FtUser from "../ft/FtUser"
  import FtUserWithFilter from "../ft/FtUserWithFilter"
  import {existsCustName, existsCustNo, identityFormat} from "@/pages/pc/assets/js/validate/rule.js"
  import CompanyInfo from "../tabs/CompanyInfo";
  import MarriageInfo from "../tabs/MarriageInfo";
  import FinancingInfo from "../tabs/FinancingInfo"
  import Investment from "../tabs/Investment"
  import GuaranteeInfo from "../tabs/GuaranteeInfo"
  import ResidentialInfo from "../tabs/ResidentialInfo"
  import {categories} from 'lss-ui/src/components/js/AttachClass'

  export default {
    name: "CustomerPerson",
    components: {
      GuaranteeInfo,
      FinancingInfo,
      MarriageInfo,
      CompanyInfo,
      PersonInfo,
      BankAccount,
      CustMember,
      FtInput,
      FtUser,
      FtUserWithFilter,
      Investment,
      ResidentialInfo
    },
    props: {
      propsBind: {
        //展示页面
        currentPage: {
          default: 1
        },
        //页面条数
        pageSize: {
          default: 8
        }
      },
      customerId: String,
      initEdit: Boolean,
      fromNode: String,
    },
    mounted() {
      this.load()
      categories(this, 'AttachClass', rest => {
        this.attachClass = rest
      })
    },
    data() {
      //根据客户名称判断是否已存在
      let validateCustName = (rule, value, callback) => {
        const _this = this
        if (this.personBack.customerName && value != this.personBack.customerName && value && value != '') {
          existsCustName(_this, rule, value, callback)
        } else {
          callback()
        }
      }
      //根据证件号码判断是否已存在
      let validateCustNum = (rule, value, callback) => {
        const _this = this
        if (this.person.identityType == '') {
          callback(new Error('请选择客户证件类型'))
        } else {
          if (this.personBack.identityNo && value != this.personBack.identityNo
                  && this.personBack.identityType && value != this.personBack.identityType
                  && value && value != '') {
            if (!identityFormat(this.person.identityType, value)) {
              callback(new Error('输入证件号码不合法'))
            } else {
              existsCustNo(_this, rule, value, callback)
            }
          } else {
            callback()
          }
        }
      }
      return {
        tabsIndex: "0",
        saveStatus: false,
        //附件分类
        attachClass: [],
        categoriesDisabled: {
          融资业务申请书: {
            upload: true, delete: false
          },
        },
        person: {
          customerId: '',
          customerName: '',
          identityType: '',
          identityNo: '',
          customerProperty: '',
          mainManagerId: '',
          viceManagerId: '',
          mainManagerName: '',
          viceManagerName: '',
          deptName: '',
          deptId: '',
        },
        personBack: {},
        // 当前单据的确认状态
        confirmStatus: '',
        // 当前表单是否可编辑
        editable: false,
        loading: false,
        editMain: true,
        infoMenu: [],
        dataVersion: 0,
        showTabInfo: false,
        showTabAtt: false,
        showTabZc: false,
        showTabGua: false,
        outTime: 0,
        showMarriage: false,
        showCompanyInfo: false,
        rules: {
          customerName:
            [{required: true, message: '客户名称不能为空', trigger: 'blur'},
              {max: 30, message: '客户名称需在30字内', trigger: 'blur'},
              {validator: validateCustName, trigger: 'blur'}],
          identityType:
            [{required: true, message: '证件类型不能为空', trigger: 'blur'}],
          identityNo:
            [{required: true, message: '证件号码不能为空', trigger: 'blur'},
              {max: 20, message: '证件号码需在20字内', trigger: 'blur'},
              {validator: validateCustNum, trigger: 'blur'}],
          mainManagerId:
            [{required: true, message: '主办客户经理不能为空', trigger: 'change'}],
          viceManagerId:
            [{required: true, message: '协办客户经理不能为空', trigger: 'change'}],
        },
      }

    },
    watch: {
      person: {
        handler(val) {
          // 过滤条件
          let viceManagerFilter = ''
          if (val.deptId) {
            viceManagerFilter = 'dt.dept_id = \'' + val.deptId + '\''
          }
          this.$refs.viceManagerRef.load(viceManagerFilter)
        },
        deep: true,
      },
      confirmStatus: {
        handler(val) {
          if ('CONFIRMED' === val) {
            this.editable = false
          } else if ('UNCONFIRMED' === val) {
            this.editable = true
          }
        }
      },
      customerId() {
        this.load()
      },
      showMarriage(val) {
      },
      showCompanyInfo(val) {
      }
    },
    methods: {
      clearIdentityNo() {
        this.person.identityNo = ''
      },
      //匹配部门回写id
      matchingDept(val) {
        this.$set(this.person, 'deptId', val.deptId)
      },

      changeCompany(value) {
        this.showCompanyInfo = value.showCompanyInfo
      },
      changeMarriage(value) {
        this.showMarriage = value.showMarriageInfo
      },
      changeDataVersion(value) {
        this.dataVersion = value
      },
      tab(val) {
        this.tabsIndex = val.name
      },
      goBackList() {
        if (this.fromNode === 'PROJECT_APPROVAL') {
          // 如果是从立项节点跳转过来的, 返回列表时需跳转至客户信息维护节点
          this.$bus.sendMessage("OPEN_APPLET", {appletId: '200510'});
        } else {
          this.$emit('returnValue', {
            switchShow: 'cust-list',
            propsBind: this.propsBind,
            customerId: null,
            initEdit: false
          });
        }
      },
      load() {
        this.$http.get('/joys-rest/lss-customer/custInfo/person/' + this.customerId).then(
          resp => {
            this.person = resp.body
            this.editMain = this.initEdit
            this.confirmStatus = this.person.confirmStatus
            this.dataVersion = this.person.dataVersion
            this.person.stockCode && this.loadFengBaoFinReport()
            if (this.person.infoMenu && this.person.infoMenu != '') {
              if (this.person.infoMenu.indexOf('tabAtt') > -1) {
                this.showTabAtt = true
                this.tabsIndex = "3"
              }
              if (this.person.infoMenu.indexOf('tabGua') > -1) {
                this.showTabGua = true
                this.tabsIndex = "2"
              }
              if (this.person.infoMenu.indexOf('tabZc') > -1) {
                this.showTabZc = true
                this.tabsIndex = "1"
              }

              if (this.person.infoMenu.indexOf('tabInfo') > -1) {
                this.showTabInfo = true
                this.tabsIndex = "0"
              }
            }
            this.personBack = JSON.parse(JSON.stringify(this.person))
          },
          resp => {
            this.$message.error(resp.body)
          })
      },
      //关键信息保存
      onSave() {
        const _this = this
        _this.loading = true
        _this.saveStatus = true
        _this.person.dataVersion = _this.dataVersion
        _this.person.customerType = 'PERSONAL'
        _this.$refs.person.validate((valid) => {
          if (valid) {
            _this.$http.put('/joys-rest/lss-customer/custInfo/person', _this.person, {
              params: {
                sourceModule: "基础关键资料",
              }
            }).then(resp => {
              _this.person = resp.body
              _this.personBack = _this.person
              _this.editMain = true
              _this.loading = false
              _this.dataVersion = _this.person.dataVersion
              _this.$message.success('保存成功!')
            }, resp => {
              _this.loading = false
              _this.$message.error(resp.body.message)
            })
          } else {
            _this.loading = false
            return false
          }
        })
        _this.saveStatus = false
      },
      //表单取消按钮
      cancel() {
        this.editMain = true
        this.person = this.personBack
        this.$refs.person.clearValidate()
      },
      //表单编辑按钮
      edit() {
        this.editMain = false
        //备份当前表单
        this.personBack = JSON.parse(JSON.stringify(this.person))
      },
      //增加tab页
      addTab(model) {
        if ('tabInfo' == model) {
          this.showTabInfo = true
          this.tabsIndex = "0"
        }
        if ('tabZc' == model) {
          this.showTabZc = true
          this.tabsIndex = "1"
        }
        if ('tabGua' == model) {
          this.showTabGua = true
          this.tabsIndex = "2"
        }
        if ('tabAtt' == model) {
          this.showTabAtt = true
          this.tabsIndex = "3"
        }
        if (this.person.infoMenu && this.person.infoMenu != '') {
          this.person.infoMenu = this.person.infoMenu + ';' + model
        } else {
          this.person.infoMenu = model
        }
        this.$http.post('/joys-rest/lss-customer/custInfo/tabs/' + this.customerId, null, {
          params: {
            'infoMenu': this.person.infoMenu,
            'customerType': this.person.customerType
          }
        }).then(resp => {

        })
      },
      //主办客户经理回调
      mainManagerChangeMatched(val) {
        this.$set(this.person, 'mainManagerId', val.userId)
        this.$set(this.person, 'deptName', val.deptName)
        this.$set(this.person, 'deptId', val.deptId)
        this.person.mainManagerName = val.userName
      },
      //协办客户经理回调
      viceManagerChangeMatched(val) {
        this.$set(this.person, 'viceManagerId', val.userId)
        this.person.viceManagerName = val.userName
      },
    }
  }
</script>
<style>
  .add-tabs-menu {
    padding: 0px;
    margin: 0px;
    backgroud-color: #353737;
  }

  .add-tabs_menu.el-dropdown-menu {
    padding: 0px;
    margin: 0px;
    backgroud-color: #353737;
  }

  .add-tabs-menu .el-dropdown-menu__item {
    padding: 0px;
    background: #353737;
  }

  .add-tabs-item.el-dropdown-menu__item {
    color: #C0C1C4;
    background: #353737;
  }

  .add-tabs-item.el-dropdown-menu__item.is-disabled {
    opacity: 0.3;
  }

  .add-tabs-item.el-dropdown-menu__item:focus, .dropdown-item.el-dropdown-menu__item:not(.is-disabled):hover {
    padding: 0px;
    color: #FFFFFF;
    background: #001616;
  }

  .add-tabs-item.el-dropdown-menu__item:not(.is-disabled):hover, .dropdown-item.el-dropdown-menu__item:focus {
    padding: 0px;
    color: #FFFFFF;
    background: #001616;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] {
    margin-top: 6px;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: #353737;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #353737;
  }

  .add-tabs-menu {
    padding: 0px;
    margin: 0px;
    backgroud-color: #353737;
  }

  .add-tabs_menu.el-dropdown-menu {
    padding: 0px;
    margin: 0px;
    backgroud-color: #353737;
  }

  .add-tabs-menu .el-dropdown-menu__item {
    padding: 0px;
    background: #353737;
  }

  .add-tabs-item.el-dropdown-menu__item {
    color: #C0C1C4;
    background: #353737;
  }

  .add-tabs-item.el-dropdown-menu__item.is-disabled {
    opacity: 0.3;
  }

  .add-tabs-item.el-dropdown-menu__item:focus, .dropdown-item.el-dropdown-menu__item:not(.is-disabled):hover {
    padding: 0px;
    color: #FFFFFF;
    background: #001616;
  }

  .add-tabs-item.el-dropdown-menu__item:not(.is-disabled):hover, .dropdown-item.el-dropdown-menu__item:focus {
    padding: 0px;
    color: #FFFFFF;
    background: #001616;
  }

  .add-tabs-item:active {
    padding: 0px;
    color: #FFFFFF;
    background: #001616;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] {
    margin-top: 6px;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: #353737;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #353737;
  }

  .tab .tabShow {
    padding: 20px;
    width: 100%;
  }

  .tabShow .tabul {
    height: 54px;
    margin: 0px;
    /* background:skyblue; */
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }

  .tabShow .tabul .tabli {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .tabShow .tabul .tabli .count {
    height: 100%;
    width: 100px;
    line-height: 54px;
    text-align: Center;
    position: relative;
  }

  .tabShow .tabul .tabli.active .count {
    color: #D62F17;
  }

  .tabShow .tabul .tabli.active .count .line {
    height: 4px;
    width: 60px;
    background: #D62F17;
    position: absolute;
    bottom: -2px;
    left: 20px;
  }

  .tabShow .tabCon {
    width: 100%;
    margin-top: 10px;
    font-size: 18px;
    flex-grow: 1;
    overflow-y: auto;
    height: 560px;
  }

  .tab .showOn {
    width: 100%;
    height: 200px;
    border-top: 1px solid #ccc;
    background: skyblue;
  }

  .tab .codeShow {
    cursor: pointer;
    width: 100%;
    height: 44px;
    border-top: 1px solid #ccc;
    position: relative;
  }

  .codeShow .trangleDown {
    width: 0;
    height: 0;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: rgb(211, 220, 230) transparent transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -4px;
  }

  .codeShow .trangleUp {
    width: 0;
    height: 0;
    border-width: 0px 8px 8px;
    border-style: solid;
    border-color: transparent transparent rgb(211, 220, 230);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -4px;
  }

  .codeShow .code {
    opacity: 0;
    color: rgb(211, 220, 230);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 20px;
  }

  .tab:hover .trangleDown {
    transition: all .3s ease 0s;
    transform: translateX(-40px);
  }

  .tab:hover .trangleUp {
    transition: all .3s ease 0s;
    transform: translateX(-40px);

  }

  .tab:hover .code {
    transition: all .3s ease 0s;
    transform: translateX(-30px);
    opacity: 1;
  }

  .codeShow:hover .trangleDown {
    border-color: #409eff transparent transparent;
  }

  .codeShow:hover .trangleUp {
    border-color: transparent transparent #409eff;
  }

  .codeShow:hover .code {
    color: #409eff;
  }

</style>
<style scoped>
  .cardBackColor {
    background-color: #F4F8F9
  }


</style>
